<template>
<div id="app">
  
  <input autofocus="autofocus" autocomplete="off" 
  	placeholder="你打算做什么" class="new-todo"
  	@keyup.enter="handleKeyup"
  	/>	
  <ul>
	  	<router-link to="/all" tag="li" activeClass="active" >
	  		所有
	  	</router-link>
	  	<router-link to="/active" tag="li" activeClass="active" >
	  		未完成
	  	</router-link>
	  	<router-link to="/completed" tag="li" activeClass="active" >
	  		已完成
	  	</router-link>
  </ul>
  <section><router-view/></section>
   <div>待办事项：{{activenum}}</div>
</div>
</template>

<script>
import {mapGetters} from "vuex"
export default {
  name: 'App',
  data(){
  	return {
  		isShow:false
  	}
  },
  methods:{
  	handleKeyup(e){
  		console.log(e.target.value)
  		this.$store.commit("add",{
  			text:e.target.value,
  			isChecked:false
  		})
  	}
  },
   computed:{
  	...mapGetters(["activenum"])
  }
}
</script>

<style>
*{margin:0;padding:0;list-style: none;font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
</style>
<style scoped>
.new-todo{
background:#eee;padding:20px 20px;border:none;outline:none;
width:calc(100% - 40px);font-size:18px;
}
ul{display:flex;}
li{border-bottom:2px solid #eee;flex:1;text-align: center;padding:10px 0;cursor:default;}
.active{border-bottom:2px solid red;}

section{padding:10px;}
</style>
